var keyterget = document.querySelectorAll("li");
keyterget.forEach((item) => {
  // 鼠标点击事件
  item.onmousedown = function () {
    if (item.className.indexOf("plate") != -1) {
      item.classList.add("active");
      debounce(flicker);
    } else if (item.className.indexOf("code") != -1 && document.querySelector(".indo div").className == "deg") {
      item.classList.add("active");
      debounce(flicker);
    }
    // 大小写锁定事件
    if (item.dataset.a == "CapsLock") {
      if (document.querySelector(".indt div").className == "deg") {
        document.querySelector(".indt div").classList.remove("deg");
      } else {
        document.querySelector(".indt div").classList.add("deg");
      }
    } else if (item.dataset.a == "NumLock") {
      // 数字键盘锁定
      if (document.querySelector(".indo div").className == "deg") {
        document.querySelector(".indo div").classList.remove("deg");
      } else {
        document.querySelector(".indo div").classList.add("deg");
      }
    } else if (item.dataset.a == "ScrollLock") {
      if (document.querySelector(".inds div").className == "deg") {
        document.querySelector(".inds div").classList.remove("deg");
      } else {
        document.querySelector(".inds div").classList.add("deg");
      }
    }
  };
  // 鼠标抬起事件
  item.onmouseup = function () {
    item.classList.remove("active");
  };
  // 鼠标移出事件
  item.onmouseout = function () {
    item.classList.remove("active");
  };
});

// 键盘点击事件
document.onkeydown = function () {
  var e = window.event || arguments[0];
  debounce(flicker);
  // 大小写锁定事件
  if (e.keyCode == 20) {
    if (document.querySelector(".indt div").className == "deg") {
      document.querySelector(".indt div").classList.remove("deg");
    } else {
      document.querySelector(".indt div").classList.add("deg");
    }
  } else if (e.keyCode == 144) {
    //数字键盘锁定
    if (document.querySelector(".indo div").className == "deg") {
      document.querySelector(".indo div").classList.remove("deg");
    } else {
      document.querySelector(".indo div").classList.add("deg");
    }
  } else if (e.keyCode == 145) {
    if (document.querySelector(".inds div").className == "deg") {
      document.querySelector(".inds div").classList.remove("deg");
    } else {
      document.querySelector(".inds div").classList.add("deg");
    }
  }
  document.querySelector(`li[data-a=${e.code}]`).classList.add("active");
};

// 键盘抬起事件
document.onkeyup = function () {
  debounce(flicker);
  var e = window.event || arguments[0];
  document.querySelector(`li[data-a=${e.code}]`).classList.remove("active");
};

//颜色色值
var color = ["#7bc93d", "#55bc4a", "#3d997a", "#439e7d", "#2f84a3", "#5ba8d6", "#7195e3", "#686ad9", "#776bbf", "#796dc1", "#b45db1", "#bb5cb9", "#c963af", "#c84181", "#c53a73"];

var arr = ["colA", "colB", "colC", "colD", "colE", "colF", "colG", "colH", "colI", "colJ", "colK", "colL"];
var time;

// 键盘着色
for (let j = 0; j < arr.length; j++) {
  var col = document.getElementsByClassName(arr[j]);
  for (let i = 0; i < col.length; i++) {
    col[i].style.background = color[j];
  }
}

// 键盘闲置时颜色闪烁
function flicker() {
  return (function () {
    //  颜色闪烁定时器
    time = setInterval(() => {
      // 闪烁原理:取颜色数组最后一个元素添加到第一个位置
      let item = color.pop();
      color.unshift(item);
      // 同一个class设置相同颜色
      for (let j = 0; j < arr.length; j++) {
        var col = document.getElementsByClassName(arr[j]);
        for (let i = 0; i < col.length; i++) {
          col[i].style.background = color[j];
        }
      }
    }, 100);
  })();
}

// 防抖触发
var timeout = null; //创建一个标记用来存放定时器的返回值
function debounce(flicker) {
  // 清空上一个颜色闪烁定时器
  clearInterval(time);
  return (function () {
    // 清空上一个循环的定时器
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      // 清空上一个颜色闪烁定时器 并开启下一个颜色闪烁定时器
      clearInterval(time);
      flicker();
    }, 5000);
  })(flicker, timeout);
}

debounce(flicker);